<template>
  <div class="cinema">
    <div class="theader">
      <img
        src=""
        alt="" @click="goBack" />
      <div class="title">电影院</div>
      <div class="city-btn" @click="gotoUrl">
        城市定位·{{ store.state.choseCityInfo.name }}
      </div>
    </div>

    <div class="clist">
      <div class="cineam" v-for="(item, index) in cinemaList" :key="'P1' + index">
        <div class="line">
          <p class="name">{{ item.name }}</p>
          <p class="price">￥ {{ formatPrice(item.lowPrice) }} 起</p>
        </div>
        <div class="line">
          <p class="address">{{ item.address.length > 20 ? item.address.slice(0, 20) + '...' : item.address }}</p>
          <p class="distance">{{ formatDistance(item.Distance) }} km</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { CinemaType } from "../types/index";
import { cinemasList } from "../api/api";
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';

// 这里我们需要知道我们选择的是哪个城市
const router = useRouter()
const route = useRoute()


const store = useStore();
const cityId = store.state.choseCityInfo.id;

let cinemaList = ref<Array<CinemaType>>([]);

// 立即执行函数，代表的是 在 setup 里面发出的请求 onMounted 发出请求
(async () => {
  let res = await cinemasList(cityId as string);
  console.log(res.data.cinemas);
  cinemaList.value = res.data.cinemas
})();

// 格式化价格
const formatPrice = (val: number): string => {
  return (val / 100).toFixed(1);
}
// 格式化距离
const formatDistance = (val: number): string => {
  return val.toFixed(2);
}

// 返回上一级
const goBack = () => {
  router.back();
  // router.go(-1);
}
const gotoUrl = () =>{
  router.push("/citys")
}

</script>

<style scoped lang='scss'>
.theader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #fcfcfc;

  img {
    width: 28px;
    margin-left: 20px;
  }

  .title {
    color: #666;
  }

  .city-btn {
    margin-right: 20px;
    color: #555;
    background: #ddd;
    padding: 3px 10px;
  }
}

.clist {
  .cineam {
    padding: 15px;
    border-bottom: 1px solid #eee;

    .line {
      height: 24px;
    }

    .name {
      color: #191a1b;
      font-size: 15px;
      float: left;
    }

    .price {
      color: #ff5f16;
      font-size: 10px;
      float: right;
    }

    .address {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
      float: left;
    }

    .distance {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
      float: right;
    }
  }
}
</style>